<template>
  <div class="main">
    <div class="container">
      <div><span>欢迎注册签约作者</span></div>
      <div class="form">
        <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
          <el-form-item label="作者笔名" prop="penName">
            <el-input v-model="form.penName" placeholder="请输入作者笔名"></el-input>
          </el-form-item>
          <el-form-item label="手机号码" prop="telPhone">
            <el-input v-model="form.telPhone" placeholder="输入手机号码"></el-input>
          </el-form-item>
          <el-form-item label="QQ或微信" prop="chatAccount">
            <el-input v-model="form.chatAccount" placeholder="输入QQ或微信"></el-input>
          </el-form-item>
          <el-form-item label="电子邮箱" prop="email">
            <el-input v-model="form.email" placeholder="输入电子邮箱"></el-input>
          </el-form-item>
          <el-form-item label="小说频道" prop="workDirection">
            <el-radio-group v-model="form.workDirection">
              <el-radio label="0">男频</el-radio>
              <el-radio label="1">女频</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <div>
          <el-button :loading="isLoading" style="width: 100%" type="primary" @click="registerAuthor(formRef)">
            立即开始您的作者生涯
          </el-button>
        </div>
        <div>
          <el-button style="width: 100%" type="primary" @click="resetForm(formRef)">清空</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import {reactive, ref, toRefs} from "vue";
import {useRoute, useRouter} from "vue-router";
import {ElMessage, type FormInstance} from "element-plus";
import {register} from "@/api/author";

const route = useRoute();
const router = useRouter();
const formRef = ref();
const state = reactive({
  isLoading: false,
  form: {
    penName: "",
    telPhone: "",
    chatAccount: "",
    email: "",
    workDirection: "0"
  },
  rules: {
    penName: [
      {required: true, message: '作者笔名不能为空', trigger: ['blur', 'change']},
      // 根据需求调整长度范围和字符类型，这里以英文字符为例
      {min: 2, max: 16, message: '作者笔名长度应在2到16个字符之间', trigger: ['blur', 'change']},
      {pattern: /^[\u4e00-\u9fa5a-zA-Z0-9]+$/, message: '作者笔名只能包含英文字符', trigger: ['blur', 'change']},
    ],
    telPhone: [
      {required: true, message: '手机号码不能为空', trigger: ['blur', 'change']},
      {pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码格式', trigger: ['blur', 'change']},
    ],
    chatAccount: [
      {required: true, message: 'QQ或微信不能为空', trigger: ['blur', 'change']},
      // 对于QQ号，可以使用较为宽松的正则表达式，实际应用中可能需要更精确的校验规则
      {pattern: /^[1-9][0-9]{4,10}$/, message: '请输入正确的QQ号码格式', trigger: ['blur', 'change']},
      // 对于微信号，通常包含字母、数字、下划线等，此处仅作为示例，可根据实际情况进行调整
      {pattern: /^[a-zA-Z0-9_]{5,20}$/, message: '请输入正确的微信账号格式', trigger: ['blur', 'change']},
    ],
    email: [
      {required: true, message: '电子邮箱不能为空', trigger: ['blur', 'change']},
      {type: 'email', message: '请输入正确的电子邮箱格式', trigger: ['blur', 'change']},
    ],
    workDirection: [
      {required: true, message: '请选择小说频道', trigger: 'change'},
    ]
  },
});
const {form, rules, isLoading} = toRefs(state)
const registerAuthor = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate(async (valid) => {
    if (valid) {
      isLoading.value = true;
      try {
        const {data} = await register(form.value);
        ElMessage.success("注册成功");
        router.push({name: "authorBookList"});
      } catch (error) {

      }
      isLoading.value = false;
    } else {
      console.log('error submit!')
      return false
    }
  })
};
const resetForm = (formEl: FormInstance | undefined) => {
  console.log(formEl)
  if (!formEl) return
  formEl.resetFields()
}


</script>
<style lang="scss" scoped>
.main {
  background-color: #F5F5F5;

  .container {
    width: 60%;
    margin: 0 auto;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    //text-align: center;
    div span {
      display: block;
      font-size: 40px;
      padding: 20px;
    }

    .form {
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 10px;
      border: 1px solid #ccc;
      width: 40%;
    }
  }
}
</style>